<template>
    <div class="group_y">
        <div class="main_title" v-if="initialIsGroup.length == 2">
            <span style="margin-right: 15px;">Y 轴分组:</span>
            <el-radio-group v-model="isGroup" @change="changeGroupYStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </div>
        <div class="main_title" v-if="isGroup !== null && initialIsGroup.length">
            编辑
            <el-tooltip class="item" effect="dark" content="分组调整" placement="top">
                <i class="el-icon-edit edit_button" v-if="isGroup == 1" @click="openDialog"></i>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="撤销修改" placement="top">
                <i class="el-icon-refresh-left edit_button" v-if="isGroup == 0" @click="cancelGroup2"></i>
            </el-tooltip>
        </div>
        <div class="group_items_div">
            <template v-for="(item, index) in data1" v-if="isGroup !== null && isGroup == 1 && initialIsGroup.includes('是')">
                <el-popover placement="bottom" trigger="hover" width="195" popper-class="my_popover_style">
                    <div class="group_childrens">
                        <template v-for="(i, y) in item.content">
                            <el-tooltip placement="top">
                                <div slot="content">{{ i.title }}</div>
                                <div class="group_children" :class="{ 'is_active': i.ischecked }"
                                    @click="changeChildStatus(i, item)">{{ i.title }}
                                </div>
                            </el-tooltip>
                        </template>
                    </div>

                    <div class="items" :class="{ 'is_active': item.ischecked }" @click="changeStatusItemY(item)"
                        slot="reference">{{ item.groupTitle }}
                    </div>
                </el-popover>
            </template>

            <template v-for="(item, index) in data2" v-if="isGroup !== null && isGroup == 0 && initialIsGroup.includes('否')">
                <div class="items" :class="{ 'is_active': item.ischecked }" @click="changeStatusItemN(item)" :key="index">{{
                    item.groupTitle }}
                </div>
            </template>
        </div>

        <el-dialog title="新建分组" :visible.sync="dialogVisible" :width="groupDialogWidth" :destroy-on-close="true"
            :close-on-click-modal="false" :close-on-press-escape="false" v-dialogDrag>
            <dialogCom @closeDialog="closeDialog" :groupObject="cloneData1" v-on="$listeners" v-bind="$attrs"
                @changeGroupList="changeGroupList" />
        </el-dialog>
    </div>
</template>

<script>
import { deepClone } from '@/utils'
import dialogCom from './dialogCom'
export default {
    name: 'GenecloudUiGroupY',
    components: {
        dialogCom
    },
    props: {
        option: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            isGroup: 1,
            data1: [],
            data2: [],
            dialogVisible: false,
            groupDialogWidth: '800px',
            cloneData1: {},
            cloneData2: [],
            initialIsGroup: [],
        };
    },
    watch: {
        option: {
            handler(val, newVal) {
                console.log('触发', val);
                if (val) {
                    this.init(val)
                }
            },
            deep: true,
            immediate: true
        }
    },
    created() {
        this.cloneData2 = deepClone(this.option.list2)
    },
    mounted() {

    },

    methods: {
        init({ initialIsGroup, isGroup, list, list2, name }) {
            this.initialIsGroup = deepClone(initialIsGroup)
            this.data1 = deepClone(list.dataGroupList)
            this.data1sample = deepClone(list.sampleList)
            this.data2 = deepClone(list2)
            this.cloneData1 = deepClone(list)
            this.isGroup = isGroup
            console.log(this.data2, '1');
        },
        changeChildStatus(i, list) {
            if (i.ischecked) {
                let num = 0
                list.content.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (num < 3) return this.$message.error('每种分组至少需要存在2个样本！')
            }
            i.ischecked = !i.ischecked
            const flag = list.content.every(item => !item.ischecked)
            if (flag) {
                list.ischecked = false
            } else {
                list.ischecked = true
            }
            this.$emit('changeData1', { dataGroupList: this.data1, sampleList: this.data1sample })
        },
        changeStatusItemY(value) {
            if (value.ischecked) {
                let num = 0
                this.data1.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (num < 2) return this.$message.error('至少需要存在1个分组！')
            }
            value.ischecked = !value.ischecked
            if (!value.ischecked) {
                value.content.map(item => {
                    item.ischecked = false
                })
            } else {
                value.content.map(item => {
                    item.ischecked = true
                })
            }
            this.$emit('changeData1', { dataGroupList: this.data1, sampleList: this.data1sample })
        },
        changeStatusItemN(item) {
            if (item.ischecked) {
                let num = 0
                this.data2.forEach(item => {
                    if (item.ischecked) {
                        num++
                    }
                })
                if (num < 2) return this.$message.error('至少需要存在一种样本！')
            }
            item.ischecked = !item.ischecked
            this.$emit('changeData2', this.data2)
        },
        changeGroupList({ dataGroupList, sampleList }) {
            this.dialogVisible = false
            this.data1 = dataGroupList
            this.data1sample = sampleList
            this.cloneData1.dataGroupList = dataGroupList
            this.cloneData1.sampleList = sampleList
        },
        //取消
        closeDialog(value) {
            this.dialogVisible = value
        },
        openDialog() {
            this.dialogVisible = true
        },
        cancelGroup2() {
            this.data2 = deepClone(this.cloneData2)
            this.$emit('changeData2', this.data2)
        },
        changeGroupYStatus(value) {
            this.$emit('changeGroupYStatus', value)
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.group_y {
    // max-height: calc(100vh - 660px);
    // overflow-y: auto;
    width: 100%;

    // background-color: red;
    .main_title {
        padding: 25px 25px 25px 0;
        font-size: 14px;
        color: #333;
        font-weight: 700;

        .edit_button {
            cursor: pointer;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;

            &:hover {
                background-color: #ccc;
                border-radius: 50%;
            }
        }
    }

    .group_items_div {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 25px 0 25px 30px;
        width: 100%;
        // height: 200px;
        // overflow-y: auto;

        .items {
            width: 74px;
            height: 30px;
            text-align: center;
            line-height: 26px;
            margin: 0 10px 10px 0;
            background-color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #ccc;
            color: #666;
            border-radius: 3px;
            cursor: pointer;

            &.is_active {
                border: 2px solid $themeTopToolColor;
            }
        }
    }
}

.my_popover_style {
    .group_childrens {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        margin: 0 auto;

        .group_children {
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            width: 50px;
            margin: 0 8px 8px 0;
            height: 24px;
            text-align: center;
            line-height: 24px;
            border: 1px solid #ccc;
            cursor: pointer;

            &:nth-child(3n) {
                margin: 0;
            }

            &.is_active {
                border: 1px solid $themeTopToolColor;
            }
        }
    }
}
</style>